<template>
    <div class="error">
        error
        <!-- <img src="~img/logo.png" />
        <p>{{ 'An error occurred: ' + query?.message || props?.error?.message || 'unknown' }}</p>
        <button
            v-if="props.error.url"
            @click="handleError">
            Try again
        </button> -->
    </div>
</template>
<script lang="ts" setup>
    // const props = defineProps<{
    //     error: Record<string, string | number>;
    // }>();
    // const { query } = useRoute();
    // function handleError() {
    //     clearError({
    //         redirect: (query?.from || props.error.url) as string,
    //     });
    // }
    const error = useError();
    console.info(error);
</script>
<style lang="scss" scoped>
    .error {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        width: 100vw;
        height: 100vh;
        font-size: 28px;
        color: #555;
        background-color: #f6f6f6;

        img {
            width: 100px;
            height: 100px;
        }

        p {
            padding: 0 20px;
            margin: 20px auto 0;
            text-align: center;
        }

        button {
            margin: 30px auto 0;
            width: 200px;
            height: 70px;
            font-size: 28px;
            color: white;
            background-color: #619b8e;
            border: none;
            border-radius: 20px;
        }
    }
</style>
